<template>
  <el-dialog
    :visible="visible"
    @close="handleClose"
    :title="$t('developer.operate_manage_usb_key')"
    width="30%"
  >
    <el-form
      ref="form"
      :model="form"
      label-position="right"
      label-width="120px"
    >
      <el-form-item :label="$t('developer.usb_key')" prop="usbKeySns">
        <el-select
          v-model="form.usbKeySns"
          multiple
          default-first-option
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="usbKeySn in usbKeySns"
            :key="usbKeySn"
            :value="usbKeySn"
            :label="usbKeySn"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" size="small" @click="handleClose">{{
          $t('common.cancel')
        }}</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="saveBindLoading"
          @click="saveBind"
          >{{ $t('common.confirm') }}</el-button
        >
      </span></template
    >
  </el-dialog>
</template>

<script>
import { bindUsbKeyList, queryBoundUsbKeyList, queryUsbKeyList } from '@/api'

export default {
  data() {
    return {
      visible: false,
      developerId: '',
      usbKeySns: [],
      usbKeySnCheckList: [],
      confirmLoading: false,
      saveBindLoading: false,
      listLoading: false,
      form: {
        usbKeySns: []
      }
    }
  },
  created() {},
  mounted() {
    this.getUsbKeyList()
  },
  methods: {
    init(developerId) {
      console.log(developerId)
      this.developerId = developerId
      this.visible = true
      this.fetchData()
    },
    getUsbKeyList() {
      queryUsbKeyList({ pageNo: 1, pageSize: 1000 }).then((data) => {
        console.log(data)
        data.data.map((item) => {
          if (item.usbKeySn) {
            console.log(item.usbKeySn)
            this.usbKeySns.push(item.usbKeySn)
          }
        })
      })
    },
    cancel() {
      this.visible = false
      this.$emit('close')
    },
    fetchData() {
      this.listLoading = true
      queryBoundUsbKeyList(this.developerId)
        .then((res) => {
          console.log(res)
          this.listLoading = false
          if (res) {
            res.forEach((item) => {
              this.form.usbKeySns.push(item)
            })
          }
        })
        .catch((e) => {
          this.listLoading = false
        })
    },
    handleClose() {
      this.developerId = ''
      this.form.usbKeySns = []
      this.visible = false
      this.confirmLoading = false
    },
    saveBind() {
      if (this.form.usbKeySns.length === 0) {
        this.$message.warning(this.$t('developer.please_choose_usb_key'))
        return
      }
      this.$confirm(this.$t('developer.save_usb_key_tip'), '', {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        const entity = {
          usbKeySns: this.form.usbKeySns
        }
        this.saveBindLoading = true
        bindUsbKeyList(this.developerId, entity)
          .then((data) => {
            if (data) {
              this.saveBindLoading = false
              this.developerId = ''
              this.form.usbKeySns = []
              this.$message.success(this.$t('common.operate_success'))
              this.visible = false
            }
          })
          .catch((e) => {
            this.$confirmError(e)
            this.saveBindLoading = false
          })
          .finally(() => {
            this.saveBindLoading = false
          })
      })
    }
  }
}
</script>
